<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<link rel="stylesheet" type="text/css" href="../Styles/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script type="text/javascript" src="../Styles/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../Styles/laypage/laypage.js"></script>
<script type="text/javascript" src="../Scripts/vue.min.js"></script>
    <style type="text/css">
        .main{
            width: 500px;
            margin-left: 45px;
        }
        .left{
            width: 250px;
            float: left;
        }
        .right{
            width: 250px;
            height: 300px;
            float: right;
        }
        .image{
            width: 200px;
            height: 200px;
            margin-top: 70px;
            margin-left: 20px;
            border:1px solid #000;
        }
        img{
         width: 200px;
         height: 200px;
        }
        tr{
            height: 33px;
        }
    </style>
</head>
<body>
<div class="main">
 <form action="../addUser" method="post" id="form" enctype="multipart/form-data">
    <div class="left">
        <h2>个人信息</h2>
       
            <table id="table">
                <tr>
                    <td>登录名:</td>
                    <td><input type="text" name="username" ></td>
                </tr>
                <tr>
                    <td>真实姓名:</td>
                    <td><input type="text" name="uname" ></td>
                </tr>
                <tr>
                    <td>所在部门:</td>
                    <td>
                       <select id="subject0" name="udepartment_id" tabindex="1">
                       <option value="">请选择部门</option>
	           		   <option v-for ="section in sectionList" value="{{section.seorid}}" >{{section.seabout}}</option>
	                   </select>
                    </td>
                </tr>
                <tr>
                    <td>性别:</td>
                    <td><input type="radio" name="usex" value="男" checked="checked">男
		                <input type="radio" name="usex" value="女">女</td>
                </tr>
                <tr>
                    <td>职称:</td>
                    <td><input type="text" name="ujob" ></td>
                </tr>
                <tr>
                    <td>角色:</td>
                    <td>
                      <select id="subject0" name="urole" tabindex="1">
                       <option value="">请选择角色</option>
	           		   <option v-for ="role in roleList" value="{{role.roleid}}" >{{role.rolename}}</option>
	                  </select>
	                </td>
                </tr>
                <tr>
                    <td>状态:</td>
                    <td>
                       <select id="subject0" name="ustate" tabindex="1">
                        <option value="正常">正常</option>
	           		    <option value="冻结">冻结</option>
	                  </select>
                    </td>
                </tr>
            </table>
        
    </div>
    <div class="right">
        <div class="image">
        <img src="" id='show'>
        <input type="file" name= "file" id='file' onchange="c()">
        </div>
        
    </div>
    <div>
       <button class="btn btn-primary" id="submit">提交</button>
    </div>
    </form>
</div>

<script type="text/javascript">
 $(function(){
	 var vue = new Vue({
		 el:"#table",
		 data:{sectionList:"",roleList:""},
		 methods:{
			 getList : function(){
				 var _self=this;
				 $.ajax({
					 url:'../getRoleSectionList',
					 type:'post',
					 dataType:'json',
					 success:function(result){
						 console.log(result);
						 _self.sectionList=result.sectionList;
						 _self.roleList=result.roleList;
					 }
				 })
			 }
		 }
		 
	 })
	 vue.getList();
	 $("#submit").click(function(){
		 $("form").submit();
	 })
	 
	 

 })
 function c () {
		 var r= new FileReader();
		 f=document.getElementById('file').files[0];
		 console.log(f);
		 r.readAsDataURL(f);
		 r.onload=function  () {
		 document.getElementById('show').src=this.result;
		 };
		 }
</script>

</body>
</html>